<script setup lang="ts">
import { NavBar, Form, Field, CellGroup, Popup, Cascader, Uploader, Toast, Button } from 'vant'
import { ref } from 'vue'

const name = ref('')
const studentId = ref('')
const department = ref('')
const departmentIds: any = ref([])

const showCascader = ref(false);
const cascaderValue = ref('');
// 选项列表，children 代表子选项，支持多级嵌套
const options = [
  {
    text: '人工智能与大数据学院',
    value: '100',
    children: [
      { 
        text: '人工智能', 
        value: '01',
        children: [
          {
            text: '2101',
            value: '2101'
          },
          {
            text: '2102',
            value: '2102'
          },
          {
            text: '2103',
            value: '2103'
          },
          {
            text: '2104',
            value: '2104'
          },
          {
            text: '2105',
            value: '2105'
          },
          {
            text: '2106',
            value: '2106'
          },
        ]
      },
      { 
        text: '大数据', 
        value: '02',
        children: [
          {
            text: '2101',
            value: '2101'
          },
          {
            text: '2102',
            value: '2102'
          },
          {
            text: '2103',
            value: '2103'
          },
          {
            text: '2104',
            value: '2104'
          },
          {
            text: '2105',
            value: '2105'
          },
          {
            text: '2106',
            value: '2106'
          },
        ]
      },
      { 
        text: '软件工程', 
        value: '03',
        children: [
          {
            text: '2101',
            value: '2101'
          },
          {
            text: '2102',
            value: '2102'
          },
          {
            text: '2103',
            value: '2103'
          },
          {
            text: '2104',
            value: '2104'
          },
          {
            text: '2105',
            value: '2105'
          },
          {
            text: '2106',
            value: '2106'
          },
        ] 
      },
    ],
    
  },
  {
    text: '生物工程学院',
    value: '101',
    children: [
      { 
        text: 'DNA', 
        value: '01',
        children: [
          {
            text: '2101',
            value: '2101'
          },
          {
            text: '2102',
            value: '2102'
          },
          {
            text: '2103',
            value: '2103'
          },
          {
            text: '2104',
            value: '2104'
          },
          {
            text: '2105',
            value: '2105'
          },
          {
            text: '2106',
            value: '2106'
          },
        ] 
      },
      { 
        text: '蛋白质', 
        value: '02',
        children: [
          {
            text: '2101',
            value: '2101'
          },
          {
            text: '2102',
            value: '2102'
          },
          {
            text: '2103',
            value: '2103'
          },
          {
            text: '2104',
            value: '2104'
          },
          {
            text: '2105',
            value: '2105'
          },
          {
            text: '2106',
            value: '2106'
          },
        ] 
      },
      { 
        text: '脑科学', 
        value: '03',
        children: [
          {
            text: '2101',
            value: '2101'
          },
          {
            text: '2102',
            value: '2102'
          },
          {
            text: '2103',
            value: '2103'
          },
          {
            text: '2104',
            value: '2104'
          },
          {
            text: '2105',
            value: '2105'
          },
          {
            text: '2106',
            value: '2106'
          },
        ] 
      },
    ],
    
  },
];
// 全部选项选择完毕后，会触发 finish 事件
const onCascaderFinish = ({ selectedOptions }: { [x: string]: [] }) => {
  showCascader.value = false;
  department.value = selectedOptions.map((option: { text: string }) => option.text).join('/');
  let depIds: any = []
  selectedOptions.forEach(((option: { value: string }) => depIds.push(option.value)));
  departmentIds.value = [...depIds]
};

const photoList = ref([])
const afterRead = (file: any) => {
    // 此时可以自行将文件上传至服务器
    console.log(file);
    file.status = 'uploading';
    file.message = '上传中...';

    // setTimeout(() => {
    //   file.status = 'failed';
    //   file.message = '上传失败';
    // }, 1000);
    setTimeout(() => {
      file.status = 'sucess';
      file.message = '上传完成';
      // photoList.value = [{ url: file.content, isImage: true }]
    }, 1000);
};

const onOversize = (file: any) => {
  Toast('文件大小不能超过 3000kb');
};

const onClickLeft = () => history.back();

const onSubmit = () => {
  let data = {
    name,
    studentId,
    department,
    departmentIds,
    photoList
  }
  console.log(data)
}
</script>

<template>
  <div class="dataInput">
    <div style="margin-bottom: 16px">
      <NavBar title="学生信息注册" left-arrow @click-left="onClickLeft"/>
    </div>
    <Form @submit="onSubmit">
      <CellGroup inset>
        <Field
          v-model="name"
          name="姓名"
          label="姓名"
          placeholder="姓名"
          :rules="[{ required: true, message: '请填写姓名' }]"
        />

        <Field
          v-model="studentId"
          name="学号"
          label="学号"
          placeholder="学号"
          :rules="[{ required: true, message: '请填写学号' }]"
        />

        <Field
          v-model="department"
          is-link
          readonly
          label="组织"
          placeholder="请选择所在组织"
          @click="showCascader = true"
        />
        <Popup v-model:show="showCascader" round position="bottom">
          <Cascader
            v-model="department"
            title="请选择所在组织"
            :options="options"
            @close="showCascader = false"
            @finish="onCascaderFinish"
          />
        </Popup>

        <Field name="uploader" label="证件照">
          <template #input>
            <Uploader v-model="photoList" :after-read="afterRead" :max-size="3000 * 1024" @oversize="onOversize" />
          </template>
        </Field>

      </CellGroup>
      <div style="width: 90%; margin: 36px auto">
        <Button round block type="primary" native-type="submit">
          确认提交
        </Button>
      </div>
    </Form>
  </div>
</template>

<style scoped>
.dataInput {
  wIdth: 100vw;
  height: 100vh;
  background-color: #f7f8fa;
}
</style>